import { useState } from 'react';
import { Drawer, Button, Form, Input, Message } from '@arco-design/web-react';
import { fetchModuleDetail, fetchModuleList } from '../../../../../api/common'
import { regExpConfig } from '../../../../../configs/regular.config'
const formItemLayout = {
  wrapperCol: {
    span: 24,
  },
};

function ModuleModify({state, setState}) {
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);
  console.log('data: ',state.moduleModify.data)
  form.setFieldValue(state.moduleModify.data)

  function update(data, cb){
    fetchModuleDetail({data: data},
      ()=>{
        Message.success('修改成功')
        cb()
      },
      ()=>{
        Message.error('修改失败')
        cb()
      })
  }

  //刷新Lisst
  function getTableList(res){
    setState(state=>{
      return{
        ...state,
        moduleList: {
            ...state.moduleList,
            loading: true
        }
    }
    })
    // fetchModuleList({},
    //     (resp)=>{
    //         setState(state=>{
    //           return{
    //             ...state,
    //             moduleList: {
    //                 ...state.moduleList,
    //                 loading: false,
    //                 data: resp.data.list
    //             },
    //             moduleModify: {
    //               ...state.moduleModify,
    //               visible: false,
    //               data: {}
    //             },
    //         }
    //         })
    //     },
    //     ()=>{
    //     }
    // )
    function funForUpdate(list){
      list.map(module=>{
        if (module.id == res.id){
          module.resIcon = res.resIcon
          module.resName = res.resName
          module.resKey = res.resKey
          module.resModule = res.resModule
          module.sort = res.sort
          console.log('module: ',module)
          return
        }
        if (module.children && module.children.length > 0){
          funForUpdate(module.children)
        }
      })
    }
    let tmp = [...state.moduleList.data]
    funForUpdate(tmp)
    setState(state=>{
      return{
        ...state,
        moduleList: {
            ...state.moduleList,
            loading: false,
            data: tmp
        },
        moduleModify: {
          ...state.moduleModify,
          visible: false,
          data: {}
        },
    }
    })
  }

  return (
    <div>
      <Drawer
        width={614}
        title={<span> 修改菜单 </span>}
        visible={state.moduleModify.visible}
        confirmLoading={confirmLoading}
        onOk={() => {
          form.validate().then((res) => {
            setConfirmLoading(true);
            update(res, ()=>{
              setConfirmLoading(false);
              getTableList(res)
            })
          }).catch(error=>{
            Message.error('未填写正确')
          });
        }}
        onCancel={() => {
          setState(state=>{
            return{
              ...state,
              moduleModify: {
                ...state.moduleModify,
                visible: !state.moduleModify.visible
              }
            }
          })
        }}
      >
        <Form {...formItemLayout} form={form} layout='vertical'>
          <Form.Item label='菜单id' required field='id' initialValue={state.moduleModify.data ? state.moduleModify.data.id : ''}>
            <Input  disabled placeholder={state.moduleModify.data ? state.moduleModify.data.id : ''}/>
          </Form.Item>
          <Form.Item label='菜单名' required field='resName' initialValue={state.moduleModify.data ? state.moduleModify.data.resName : ''}
            rules={[
              { required: true, minLength: 3, maxLength: 10, message: '菜单名为3-10个字符', }]}>
            <Input placeholder={state.moduleModify.data ? state.moduleModify.data.resName : ''}/>
          </Form.Item>
          <Form.Item label='排序数字' required field='sort' initialValue={state.moduleModify.data ? state.moduleModify.data.sort : ''}
            rules={[
              { required: true },
              {required: true, minLength: 1, message: '排序长度不小于1',},
              { match: regExpConfig.isInt, message: '必须是数字' }]}>
          <Input placeholder={state.moduleModify.data ? state.moduleModify.data.sort : ''}/>
          </Form.Item>
          <Form.Item label='模块名称'  field='resModule'  initialValue={state.moduleModify.data ? state.moduleModify.data.resModule : ''}
             rules={[
              { required: true, minLength: 3, maxLength: 10, message: '菜单名为3-10个字符', }]}>
          <Input placeholder={state.moduleModify.data ? state.moduleModify.data.resModule : ''} />
          </Form.Item>
          <Form.Item label='关键字' required field='resKey' initialValue={state.moduleModify.data ? state.moduleModify.data.resKey : ''}
            rules={[
              { required: true, minLength: 3, maxLength: 10, message: '关键字应该为3-10个字符',},
              { match: regExpConfig.isNotChina, message: '必须为非中文字符' }
              ]}>
          <Input placeholder={state.moduleModify.data ? state.moduleModify.data.resKey : ''} />
          </Form.Item>
          <Form.Item label='图标名称' field='resIcon'  initialValue={state.moduleModify.data ? state.moduleModify.data.resIcon : ''}
            rules={[
              { required: true, minLength: 1, maxLength: 10, message: '菜单名为3-10个字符', },
              { match: regExpConfig.isNotChina, message: '必须为非中文字符' }
              ]}>
          <Input placeholder={state.moduleModify.data ? state.moduleModify.data.resIcon : ''} />
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}

export default ModuleModify